<template>
  <div id="app">
    <MyHeader color="#fff" bgColor="teal">tab栏</MyHeader>
    <keep-alive>
      <!-- is是 tabs里面下标的名字 -->
      <component :is="tabs[index].name"></component>
    </keep-alive>

    <!-- 用了v-model语法糖 -->
    <MyTabBar :tabs="tabs" v-model="index"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyTabBar from "./components/MyTabBar";
import GoodsList from "./views/GoodsList";
import GoodsSearch from "./views/GoodsSearch";
import User from "./views/User";
import Cart from "./views/Cart";
export default {
  components: {
    MyHeader,
    MyTabBar,
    GoodsList,
    GoodsSearch,
    User,
    Cart,
  },
  data() {
    return {
      tabs: [
        { icon: "icon-shangpinliebiao", title: "商品列表", name: "GoodsList" },
        { icon: "icon-sousuo", title: "商品搜索", name: "GoodsSearch" },
        { icon: "icon-user", title: "用户中心", name: "User" },
        { icon: "icon-gouwuche", title: "购物车", name: "Cart" },
      ],
      index: 0,
    };
  },
  methods: {
    HighlightFn(index) {
      this.index = index;
    },
  },
};
</script>

<style scoped>
#app {
  padding: 50px 0;
}
</style>
